<template>
    <div>
        <div ref="echartsRef" class="echarts"></div>
    </div>
</template>
<script>
export default {
    props: {
        chatTitle: {
            type: String,
            default: "",
        },
        data: {
            type: Array,
            default: () => [],
        },
        chartColor: {
            type: Array,
            default: () => {
                return [
                    "#5470c6",
                    "#91cc75",
                    "#fac858",
                    "#ee6666",
                    "#73c0de",
                    "#3ba272",
                    "#fc8452",
                    "#9a60b4",
                    "#ea7ccc",
                ];
            },
        },
    },
    name: "middleEcharts",
    data() {
        return {};
    },
    created() {},
    mounted() {
        // this.initChart();
    },
    watch: {
        data: {
            handler(newVal, oldVal) {
                this.initChart();
            },
            deep: true,
        },
    },
    methods: {
        initChart() {
            var chartBox = this.$refs.echartsRef;
            let myChart = this.$echarts.getInstanceByDom(this.$refs.echartsRef);
            if (myChart == null) {
                myChart = this.$echarts.init(chartBox);
            }
            let option = {
                title: {
                    text: this.chatTitle,
                    left: "center",
                    top: "65%",
                    textStyle: {
                        fontSize: "12",
                        fontWeight: "bold",
                        color: "#000",
                    },
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    top: "2%",
                    left: "center",
                },
                color: this.chartColor,
                series: [
                    {
                        name: this.chatTitle,
                        type: "pie",
                        radius: ["30%", "50%"],
                        center: ["50%", "40%"],
                        data: this.data,
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: "#fff",
                            borderWidth: 0,
                        },
                        label: {
                            show: true,
                            formatter: function (data) {
                                //显示数量、百分比
                                return `${data.name} \n ${data.value}个`;
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 15,
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: true,
                            length: 4,
                            length2: 4,
                        },
                    },
                ],
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
    },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.echarts {
    width: 100%;
    height: 200px;
}
</style>
